<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>房源信息</title>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/house.css">
		<link rel="stylesheet" type="text/css" href="font/iconfont.css">

		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<!-- 顶部 -->
		<header>
			<div class="header-left">返回</div>
			<div class="header-right">房源信息</div>
		</header>
		<!-- 主体 -->
		<div class="main">
			<div class="top">
				<p id="name">巴拉巴拉</p>
				<div class="touxiang"><img id="faceImg" src="images/pic.png" style="width: 120px;height: 120px;border-radius: 100%;" alt=""></div>
			</div>
			<div class="content">
				<p>
					房源归属：
					<span>
	             	<select style="outline:none;width: 180px;" id="hotelList">
						
					</select>
             	</span>
				</p>
				<p>房源数量：<span id="houseCnt"></span></p>
				<p>合计面积：<span id="sumArea"></span></p>
				<div id="app">
					<p v-for="(site,index) in sites">单套面积：
						<span v-if="index==0">{{site.cardTitle}}({{site.area}}m²)</span>
						<span v-else style="margin-left:76px;">{{site.cardTitle}}({{site.area}}m²)</span>
					</p>

				</div>
			</div>
		</div>
		<!-- 底部 -->
		<footer>
			<ul>
				<a href="index.html">
					<li style="border-right: 1px solid #fff;"><i class="iconfont">&#xe633;</i><span>首页</span></li>
				</a>
				<a href="bill.html">
					<li style="border-right: 1px solid #fff;"><i class="iconfont">&#xe754;</i><span>账单</span></li>
				</a>
				<a href="person.html">
					<li class="blue"><i class="iconfont">&#xe61a;</i><span>我的</span></li>
				</a>
			</ul>
		</footer>

	</body>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/house.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/select2.full.js"></script>
	<script src="js/vue.min.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				sites: ''
			}
		})
		var id = localStorage.getItem("id");
		if(id) {
			$.post(
				rootpath + '/contractMaster/findContractMaster/' + id,
				function(data) {
					$("#name").html(data.nickname);
					$("#faceImg").attr("src", data.faceImg);
				}, "json"
			);
			$.post(
				rootpath + "/contractMaster/getHotelList/" + id,
				function(data) {
					$("#hotelList").select2({
						data: data
					})
					$("#select2-hotelList-container").remove();
					otherInfo(data[0].id);
				},
				"json"
			);
		} else {
			location.href = "login.html";
		}

		function otherInfo(id) {
			$.post(
				rootpath + "/contractMaster/getHotelInfo/" + localStorage.getItem("id") + "/" + id,
				function(data) {
					$("#houseCnt").html(data.houseCount + "套");
					$("#sumArea").html(data.sumArea + "㎡");
					vm.$data.sites = data.houseVoList;
				},
				"json"
			);
		}
	</script>

</html>